<template>
  <div id="app">
    <router-view class="container" style="padding-bottom:50px"/>
    <div class="nav">
      <ul>
        <!-- router-link 实现页面跳转，必填to属性
        to对应需要跳转到的路由，需要在路由代码文件中配置在做
        路由跳转的时候可以传递参数
        name   路由名字（建议跳转时使用）
        path   路径
        query  查询条件（url传递）
        params 查询参数（需要在路径中做配置） -->
        <li :class="{active:id==1}" @click="dianji(1)"><router-link :to="{name:'Home'}"><i class="fa fa-home"></i><br>首页</router-link></li>
        <li :class="{active:id==2}" @click="dianji(2)"><router-link :to="{name:'List'}"><i class="icon fa fa-bars"></i><br>列表</router-link></li>
        <li :class="{active:id==3}" @click="dianji(3)"><router-link :to="{name:'News'}"><i class="icon fa fa-bath"></i><br>资讯</router-link></li>
        <li :class="{active:id==4}" @click="dianji(4)"><router-link :to="{name:'About'}"><i class="icon fa fa-user"></i><br>关于</router-link></li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      id:1
    }
  },
  methods: {
    dianji(id){
      this.id = id;
    }
  }
}
</script>

<style>
.nav{
  width: 100%;
  position: fixed;
  bottom: 0;

}
.nav ul{
  padding: 0;
  margin: 0;
  width: 100%;
  display: flex;
}
.nav ul li{
  list-style: none;
  display: inline-block;
  width: 25%;
  padding: 5px;
  background-color: orangered;
  border-left: 1px solid black;
}
.nav ul li:first-child{
  border: none;
}
.nav ul li.active{
  background-color:deepskyblue;
}
.nav ul li a{
  width: 100%;
  text-align: center;
  display: inline-block;
  color: #fff;
  font-size: 1.6rem;
}
</style>
